<template>
	<view class="card_apply_warp">
		<Header left-path-type="switchTab" leftPath="/pages/card/card" :title="$t('card.apply.card')"/>
		<view class="card_apply_content_warp">
			<view class="_content_item_warp" v-for="(item,index) in cardList" :key="item.id">
				<up-image :src="item.cardImg" width="100%" height="100" bgColor="#f1f6ff00" mode="widthFix"></up-image>
				<view 
					class="_content_item_info" 
					:style="{
						'background': item.btnBgColor,
						'color': item.btnFontColor,
					}"
					@click="jumpApplyCard(item)"
				>
					<text style="margin-left: 4rpx;">{{item.payAmount}}USDT</text>
					<text style="margin-left: 10rpx;font-size: 24rpx;">{{$t("common.apply.activation")}}</text>
				</view>
				<view 
					class="_content_item_fee"
					:style="{
						'color': item.btnBgColor,
					}"
				>
					{{$t("common.quota")}}{{item.bankCard ?item.bankCard.transLimit : 0}}
				</view>
			</view>
		</view>
		<!-- 温馨提示 -->
		<up-modal :show="openShow" :showConfirmButton = "false">
			<view class="slot-content">
				<view class="close_warp" @click="openShow=false;">
					<up-image src="/static/comm/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="content_">
					<view class="content_1">{{$t("common.warm.reminder")}}</view>
					<view class="content_2">{{$t("card.apply.recharge.balance")}}</view>
				</view>
				<view class="but_">
					<view class="but_copy" @click="jumpRecharge">{{$t("home.balance.go")}}</view>
					<view class="but_close" @click="openShow=false;">{{$t("common.cancel")}}</view>
				</view>
			</view>
		</up-modal>
	</view>
</template>

<script>
	import Header from '@/components/header_comm2.vue';
	import { getCategoryList } from '@/api/card.js';
	import { getAcctBalance } from '@/api/finance.js';
	import { CARD_TYPE } from '@/utils/enumUtils.js';
	
	export default {
		components:{Header},
		data() {
			return {
				cardList:[
					{
						id:1,
						path:'/static/card/card_01_f.png',
						show:true,
						background:"#FFFFFF",
						colorBut:"#054DC1",
					},{
						id:2,
						path:'/static/card/card_02_f.png',
						show:false,
						background:"#704805",
						colorBut:"#FAEAC0",
					},{
						id:3,
						path:'/static/card/card_03_f.png',
						show:false,
						background:"#D0984A",
						colorBut:"#0A0806",
					}
				],
				openShow:false,
			};
		},
		mounted() {
			this.getCategoryListFun();
		},
		methods: {
			// 开卡
			async jumpApplyCard(item){
				// 需要先判断余额
				const resp = await getAcctBalance();
				console.log("item",item);
				console.log("resp",resp);
				if(resp && resp.bizcode === 100){
					if(resp.data >= item.payAmount){
						uni.navigateTo({
							url:"/pages/card_apply_step/card_apply_step?id="+item.id,
						})
					}else{
						this.openShow = true;
					}
				}
			},
			async getCategoryListFun(){
				const params = {
					category:CARD_TYPE.VIRTUAL,
					page:1,
					pageSize:10,
				};
				// 虚拟
				const resp = await getCategoryList(params);
				if(resp && resp.bizcode === 100){
					this.cardList = resp.data.entitys;
				}
			},
			/**
			 * 前往充值
			 */
			jumpRecharge(){
				uni.navigateTo({
					url:"/pages/recharge/recharge",
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.card_apply_warp{
	height: calc(100vh - 80rpx);
	.card_apply_content_warp{
		padding: 40rpx;
	}
	._content_item_warp{
		margin-bottom: 20rpx;
		position: relative;
	}
	._content_item_info{
		position: absolute;
		top: 76%;
		left: 52%;
		border-radius: 30rpx;
		padding: 14rpx 36rpx;
		font-weight: bold;
		font-size: 20rpx;
	}
	._content_item_fee{
		position: absolute;
		left: 28%;
		top: 80%;
		font-size: 24rpx;
	}
}
</style>
